<template>
  <view class="safe-bottom">
    <navigation back title="我的收藏" />

    <view class="container">
      <view class="page-container">
        <!-- 骨架屏 -->
        <view
          class="skeleton-view flex flex-middle flex-between flex-wrap"
          v-if="loading && !list.length"
        >
          <view
            class="skeleton-item"
            v-for="(item, index) in Array(2)"
            :key="index"
          >
            <view style="padding: 16px">
              <u-skeleton rows="7" loading :title="false" />
            </view>
          </view>
        </view>

        <view v-else>
          <image
            src="@/static/image/common/default.png"
            mode="widthFix"
            class="default-png"
            v-if="!list.length"
          />
          <service-list :list="list" />
        </view>

        <u-loadmore
          :status="loadStatus"
          :nomoreText="totalPage ? '没有更多了' : '还没有收藏的服务哦'"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { getCollectList } from "@/api/follow";

export default {
  data() {
    return {
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
    };
  },
  computed: {
    loadStatus() {
      let str = this.loading
        ? "loading"
        : this.totalPage <= this.page
        ? "nomore"
        : "loadmore";
      return str;
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getCollectList();
  },
  onLoad() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.list = [];
      this.page = 1;
      this.getCollectList();
    },
    async getCollectList() {
      this.loading = true;
      const { data } = await getCollectList({
        page: this.page,
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 0 16px;
}

.default-png {
  width: 200px;
  margin: 80px auto 36px;
  display: block;
}

.skeleton-view {
  .skeleton-item {
    width: 49%;
  }
}
</style>